<template>
  <div>
    <headers></headers>
    <!--<carousel></carousel>-->
    <p class="banner padding88"><img :src="sliderImg" alt="" height="200px" width="100%"></p>
    <div class="divider ">
      <div class="auto">
        <router-link to="/">首页</router-link><span>></span>学分转换
      </div>
    </div>
      <div class="auto padding250">
        <!--<p class="title">学分转换</p>-->
        <div class="container">
          <ul v-if="isPass === 0">
            <li><img src="../../assets/shenhe.png" alt=""></li>
            <li>提交成功，请等管理员审核！</li>
            <li>预计1-3个工作日内审核完成</li>
          </ul>
          <ul class="last" v-if="isPass === 1">
            <li><img src="../../assets/shenhe2.png" alt=""></li>
            <li>学分转换请参加考试</li>
            <li> <Button class="nextbtn" >立即参加</Button></li>
          </ul>
          <ul v-if="isPass === 2">
            <li><img src="../../assets/shenhe1.png" alt=""></li>
            <li>审核未通过！</li>
            <li>未通过原因：<span>{{opinion}}</span></li>
            <li> <Button class="nextbtn" @click="next">重新提交</Button></li>
          </ul>
        </div>
      </div>
    <Spin fix v-show="isSpinShow" >
      <div class="loader">
        <Icon type="ios-loading" size=26 class="demo-spin-icon-load"></Icon>
        <div class="font14">加载中...</div>
      </div>
    </Spin>
    <footers></footers>
  </div>
</template>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  /* 旋转效果 */
  .demo-spin-icon-load{
    animation: ani-demo-spin 1s linear infinite;
  }
  @keyframes ani-demo-spin {
    from { transform: rotate(0deg);}
    50% { transform: rotate(180deg);}
    to { transform: rotate(360deg);}
  }
  /* 假如内容过长，一屏放不下，滚动条下拉覆盖不全 */
  .ivu-spin-fix {
    position: fixed;
  }



  .banner{
    height: 260px;
  }
  .divider{
    height: 53px;
    background-color: #fff;
    font-size: 14px;
    color: #957960;
    line-height: 53px;
    text-align: left;
    margin-bottom: 30px;
    box-shadow: 5px 1px 10px #ccc;
    a{
      color: #957960;
      &:hover{
        color: #9C7649;
        font-weight: 700;
      }
    }
    span{
      margin: 0 10px;
    }
  }

  .title{
    font-size: 20px;
    color: #000;
    margin: 20px 0 25px 0;
    text-align: left;
    padding: 15px 20px ;
    background-color: #fff;
  }
  .container{
    background-color: #fff;
    padding: 155px 0 0;
    text-align: center;
    font-size: 14px ;
    color: #999;
    height: 600px;
    li:nth-child(2){
      font-size: 24px ;
      color: #000;
      margin: 20px 0;
    }
    li span{
      color: #000;
    }
    .nextbtn{
      background-color: #957960;
      height: 55px;
      width: 221px;
      font-size: 18px;
      color: #fff;
     margin-top: 30px;
    }
    .last{
      margin-top: -110px;
    }
  }
</style>
<script type="text/ecmascript-6">
  import headers from '../template/header'
  import footers from '../template/footer'
  import carousel from '../template/carousel'
  import {checkScore,centreInfoWeb,sliderPC} from '../../http'
    export default {
        name: '',
        props: {},
        data() {
            return {
              isSpinShow:false,
              isPass:'',
              opinion:'',
              sliderImg:'',
            };
        },
        methods: {
          next(){
              this.$router.push({
                name: 'zhuanhuan1'
              })
          },
          getZhuanhuan3(){
            //用户是否登录，同时获取用户信息
            if(this.isSpinShow === false) {
              this.isSpinShow = true;
              centreInfoWeb().then(res => {
                if (res.code === 200) {
                  //获取封面图
                  sliderPC({sliderType:'5'}).then(res =>{
                    this.sliderImg = res.data.slider.sliderImg;
                  }).catch()
                  checkScore().then(res => {
                    if (res.code === 200) {
                      if (res.data.isPass === 3) {
                        this.isSpinShow = false;
                        this.$router.push({name: 'zhuanhuan1'})
                      } else {
                        this.isSpinShow = false;
                        this.isPass = res.data.isPass;
                        this.opinion = res.data.opinion;
                      }
                    } else {
                      this.isSpinShow = false;
                      this.$Notice.warning({
                        title: "学分转换提醒",
                        desc: res.info,
                        duration: 3,
                      })
                    }
                  }).catch()
                } else {
                  this.isSpinShow = false;
                  this.$Notice.warning({
                    title: '登录提醒 ',
                    desc: '参与学分转换，需用户登录！ ',
                    duration: 3,
                  });
                  this.$router.push({
                    path: '/'
                  })
                }
              }).catch()
            }
          }
        },
        created() {
          // this.getZhuanhuan3()
          /*this.$router.push({
            name:'zhuanhuan'
          })*/
        },
      components: {
        headers,
        footers,
        carousel
      }
    }
</script>
